<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画_三种方式的显示/隐藏元素</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
    <script>
/*        三种方式显示和隐藏元素：
            1.默认方式的显示和隐藏方法:
              show(speed,easing,fn)显示
              hide(...)隐藏
              toggle(...)切换显示和隐藏
            2.滑动方式的显示和隐藏方法:
              slideDown(...)显示
              slideUp(...)隐藏
              slideToggle(...)切换
            3.淡入淡出方式的显示和隐藏方法:
              fadeIn(...)显示
              fadeOut(...)隐藏
              fadeToggle(..)切换
           参数:
           speed:动画速度。三个预定义值("slow/normal/fast")或表示动画时长的毫秒值
           easing:指定切换效果，默认值是"swing",可用的参数还有"linear"
                 swing:表示动画执行时效果为先慢，中间快，最后又慢
                 linear:表示动画执行时速度是匀速的。
           fn:在动画完成时执行的函数，每个元素执行一次。
 */
        //隐藏div
        function hideFn(){
           /* $("#showDiv").hide("slow","swing",function(){
                alert("隐藏了...")
            });*/
/*
           //默认方式
            $("#showDiv").hide(5000,"swing");
*/
/*
            //滑动方式
            $("#showDiv").slideUp("slow");

            */
            //淡入淡出方式
            $("#showDiv").fadeOut("slow");
        }

        //显示div
        function showFn(){
            /*$("#showDiv").show("slow","swing",function(){
                alert("显示了...")
            });*/

            /*
            //默认方式
            $("#showDiv").show(5000,"linear");
            */
/*
            //滑动方式
            $("#showDiv").slideDown("slow");
            */

            //淡入淡出方式
            $("#showDiv").fadeIn("slow");
        }


        //切换显示和隐藏div
        function toggleFn(){
            /*
            //默认方式
            $("#showDiv").toggle("slow");
*/
            /*
            //滑动方式
            $("#showDiv").slideToggle("slow");
*/
            //淡入淡出方式
            $("#showDiv").fadeToggle("slow");
        }
    </script>
</head>
<body>
<input type="button" value="点击按钮隐藏div" onclick="hideFn()">
<input type="button" value="点击按钮显示div" onclick="showFn()">
<input type="button" value="点击按钮切换div显示和隐藏" onclick="toggleFn()">

<div id="showDiv" style="width:300px;height:300px;background:pink">
    div显示和隐藏
</div>
</body>
</html>
